<template>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInRight"
    leave-active-class="animated fadeOutRight"
  >
    <div class="pug-drawer" v-show="isshowbox">
      <div class="pug-drawer-box-overlay" @click="closeBox"></div>
      <div class="pug-drawer-box">
        <div>你当前操作的用户是：{{ cuser.nickname }}</div>
        <table border="0" cellpadding="0" cellspacing="0" class="xqui-table">
          <thead>
          <tr>
            <th class=" xqui-table-col-special">
              <div class="xqui-table-cell laytable-cell-checkbox">
                <div class="xqui-unselect xqui-form-checkbox">
                  <i class="xqui-icon xqui-icon-ok"></i>
                </div>
              </div>
            </th>
            <th class=" xqui-unselect">
              <div class="xqui-table-cell"><span>角色ID</span></div>
            </th>
            <th class=" xqui-unselect">
              <div class="xqui-table-cell"><span>角色名称</span></div>
            </th>
            <th class=" xqui-unselect">
              <div class="xqui-table-cell"><span>角色代号</span></div>
            </th>
            <th class=" xqui-table-col-special">
              <div class="xqui-table-cell"><span>操作</span></div>
            </th>
          </tr>
          </thead>
          <tbody>
          <tr :key="item.id" data-index="0" v-for="(item , index) in roleList">
            <td class="xqui-table-col-special" data-field="0" data-key="1-0-0">
              <div class="xqui-table-cell laytable-cell-checkbox">
                <div class="xqui-unselect xqui-form-checkbox">
                  <i class="xqui-icon xqui-icon-ok" ></i>
                </div>
              </div>
            </td>
            <td>
              <div class="xqui-table-cell">{{ item.id }}</div>
            </td>
            <td>
              <div class="xqui-table-cell">{{ item.name }}</div>
            </td>
            <td>
              <div class="xqui-table-cell">{{ item.code }}</div>
            </td>
            <td class="xqui-table-col-special">
              <div class="xqui-table-cell" v-if="item.isGrant">
                <a @click.prevent="removeRole(index)"
                   class="xqui-btn xqui-btn-xs xqui-btn-danger"><i
                  class="iconfont icon-remove2"></i>解除绑定 </a>
              </div>
              <div class="xqui-table-cell" v-else>
                <a @click.prevent="toRole(index)"
                   class="xqui-btn xqui-btn-xs xqui-btn-normal"><i
                  class="iconfont icon-remove2"></i>授权角色 </a>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </transition>
</template>

<script>
import roleService from '@/services/role'

export default {
  name: "PugRole",
  props: {
    isshowbox: {
      type: Boolean,
      default: false
    },
    cuser: {
      type: Object,
      default:{}
    }
  },

  data() {
    return {
      roleList: []
    }
  },

  created() {
    // 如果你要初始化就查询，就打开
    //this.loadRole();
  },

  methods: {

    closeBox() {
      this.$emit("change", false);
    },

    async loadRole(userId){
        var serverResponse = await roleService.findRoleList({userId})
        this.roleList = serverResponse.data;
    },

    toRole(index) {
      // 把子组件得数据，。然后把子组件得数据传递给你指定得select得父事件。
      this.$emit("select", this.roleList[index],index);
    },

    removeRole(index) {
      // 把子组件得数据，。然后把子组件得数据传递给你指定得select得父事件。
      this.$emit("remove", this.roleList[index],index);
    },

    changeGrant(index,flag){
      this.roleList[index].isGrant = flag;
    }
  }
}
</script>

<style scoped>
.pug-drawer{position: fixed;top:0;bottom: 0;right:0;left:0;z-index:100;}
.pug-drawer-box{padding: 10px 20px;position:fixed;top:0;bottom: 0;right:0;width: 600px;background:#fff;box-shadow:0 0 1em rgba(0,0,0,0.3);z-index:100}
.pug-drawer-box-overlay{position:fixed;top:0;bottom: 0;right:0;left:0;z-index:99;background:rgba(0,0,0,0.6)}
</style>
